<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js"></script>
    <link rel="stylesheet" href="css/2.css">
    <script src="vue-router.js"></script>
</head>
  
<body>
    <div id="app">
       <div v-bind:class="{head}">
           <img src="images/Logo.jpg" v-bind:class="{img}">
           <h3 v-bind:style="{position: position,left: left}">
                {{ msg }}
            </h3>
           <p style="position: absolute;left: 25%;top: 5%;">
                Operation of University Internal Powers Datebase
            </p>
            <p style="position: absolute;right: 8px;top: 0;">
                会员登录|注册|收藏
            </p>
            <p style="position: absolute;right: 230px;top: 45px;">
                通知：8279667676
            </p>
       </div>
       <div v-bind:class="{select}">
           <a href="index.html" style="position: relative;left: 17%;color: aliceblue;text-decoration: none;top: 6px;">
                首页
            </a> 
           <a href=" "  style="position: relative;left: 22%;color: aliceblue;text-decoration: none;top: 6px;">
                学术动态
            </a>
            <a href="2.html"  style="position: relative;left: 27%;color: aliceblue;text-decoration: none;top: 6px;">
                文献库
            </a>
            <a href=" "  style="position: relative;left: 32%;color: aliceblue;text-decoration: none;top: 6px;">
                文件库
            </a>
            <a href=" "  style="position: relative;left: 37%;color: aliceblue;text-decoration: none;top: 6px;">
                案例库
            </a>
            <a href=" "  style="position: relative;left: 42%;color: aliceblue;text-decoration: none;top: 6px;">
                关于我们
            </a>
            <a href=" "  style="position: relative;left: 47%;color: aliceblue;text-decoration: none;top: 6px;">
                联系我们
            </a>
            <input type="text" placeholder="搜索框" v-on:keyup.enter="submit" style="position: relative;left: 56%;top: 3px;">
            <button @click="search" value="搜索" style="position: relative;left: 57%;width: 50px;height: 20px;font-size: 12px;top: 4px;">
                查找
            </button>
       </div>
       <div v-bind:class="{left}">
           <div :class="{title1}">
               <p style="position: relative;left: 60px;top: 8px;">
                文献库
               </p>
           </div>
           <ul :class="{menu}">
               <p>国内文献</p>
               <hr style="width: 70%;margin-left: -5%;">
               <li>
                   <ul><a href="javascript:openurl('3.html')">学术论文</a></ul>
                   <hr style="width: 70%;margin-left: 5%;">
                   <ul><a href="javascript:openurl('3.html')">学术专著</a></ul>
                   <hr style="width: 70%;margin-left: 5%;">  
               </li>
               <li><a href="javascript:openurl('2-1.html')">国外文献库</a></li>
               <hr style="width: 70%;margin-left: -5%;">
           </ul>
          <div class="title2">
            <p style="position: relative;left: 50px;top: 80px;background-color: rgb(63, 57, 57);
            color: aliceblue;width: 180px;height: 30px;">
                &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp联系我们
               </p>
             <br>
             <br>
             <br> 
            <p style="font-size: small;">&nbsp&nbsp&nbspxxxx大学高等教育研究学院</p>
            <p style="font-size: small;">&nbsp&nbsp&nbsp高校内部权力制约与监督机制研究课题组</p>
            <p style="font-size: small;">&nbsp&nbsp&nbsp电子邮箱：ih@xxxx.edu.cn</p>
            <p style="font-size: small;">&nbsp&nbsp&nbsp电话：0111-85707273</p>
           </div>
       </div>
       <div :class="{center}">
           <p style="margin-left: 70%;color: aliceblue;">您的位置：首页<文献库<国内文献<学术专著 &nbsp</p>
       </div>
        <div class="item">
            <p style="margin-left: 25%;">关键词</p>
            <input type="text" style="position: absolute;left: 30%;top: 18px;border: 1px solid green;">
            <p style="position: absolute;left: 45%;top: 3px">发表时间</p>
            <input type="text" style="position: absolute;left: 53%;top: 18px;border: 1px solid green;">
            <input type="text" style="position: absolute;left: 70%;top: 18px;border: 1px solid green;">
            <button style="position: absolute;left: 83%;top: 18px">搜索</button>
         </div>
         <div :class="{right}">
            <iframe id="rightFrame" frameborder="0.1" width="100%" height="100%">
                
            </iframe>
       </div>
       <div :class="{bottom}">
            
       </div>
    </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{
               head:'head',
               img:'img',
               left:'left',
               msg:'高校内部权力运行数据库',
               left:'25%',
               position: 'absolute',
               select:'select',
               title1:'title1',
               right:'right',
               menu:'menu',
               center:'center',
               bottom:'bottom'
            },
            methods:{
                submit:function(){
                    alert("没有相应查询")
                },
                search:function(){
                    alert("没有相应查询")
                }
            }
        })
        function openurl(url) {
            var rframe = parent.document.getElementById("rightFrame");
            rframe.src = url;
        }
    </script>
</body>
</html>